<template>
  <div class="box">
    <!-- <div class="back"><span @click="back()">返回上一级></span></div> -->
    <div class="vflex xs12">
      <div class="aside">
        <div class="logo">
          <img
            width="100%"
            height="100%"
            v-if="companyLogo === 'none'"
            src="@/assets/img/default.png"
          />
          <img
            width="100%"
            height="auto"
            v-if="(companyLogo.indexOf('base64') > -1)||(companyLogo.indexOf('http') > -1)"
            :src="companyLogo"
          />
        </div>
        <div class="info1">
          <h2>{{ companyName }}</h2>
          <ul class="score-list">
            <li class="comprehensive">
              <em>综合指数：</em>
              <div v-if="compositeScore !== ''">
                <!-- <p class="score-star clearfix" :title="compositeScore + '分'">
                  <span
                    v-for="index in 5"
                    :key="index"
                    :class="[
                      {
                        color1:
                          80 <= Math.ceil(compositeScore) ||
                          (60 <= Math.ceil(compositeScore) && index <= 4)
                      },
                      {
                        color2:
                          60 >= Math.ceil(compositeScore) &&
                          40 <= Math.ceil(compositeScore) &&
                          index <= 3
                      },
                      {
                        color3:
                          (40 >= Math.ceil(compositeScore) &&
                            20 <= Math.ceil(compositeScore) &&
                            index <= 2) ||
                          (20 >= Math.ceil(compositeScore) &&
                            0 < Math.ceil(compositeScore) &&
                            index == 1)
                      }
                    ]"
                  ></span>
                </p> -->
                <i>{{compositeScore}}</i>
                <el-popover
                  placement="right-start"
                  title=""
                  width="500"
                  trigger="click">
                  <p class="pop-content">
                    <span>· 企业稳定指数：企业自身及其股东的企业性质、注册资本、同行业注册资本对比、融资情况、股权出质、股权冻结、司法拍卖等。</span>
                    <span>· 科技创新指数：通过多源科技数据自动关联发现和智能算法模型对该公司所拥有技术情况的20多项评估纬度计算出的模型数值。</span>
                    <span>· 投资风险指数：企业自身、股东、对外投资公司、子公司、兄弟公司的企业性质、注册资本、企业失信信息、核心人员失信信息、欠缴税信息、违法违规信息、股权出质、股权冻结、司法拍卖等。</span>
                    <span>· 市场情续指数：近一年企业相关新闻信息数量、正负面新闻信息占比等。</span>
                  </p>
                  <span slot="reference" class="iconfont icon-qm wenhao"></span>
                </el-popover>
              </div>
              <p v-else class="el-icon-loading"></p>
            </li>
            <li>
              <em>企业稳定指数：</em>
              <p class="score-star clearfix" :title="stabilityScore+'分'">
                <span v-for="(index) in 5" :key="index"
                  :class="[{'color1': 80<=Math.ceil(stabilityScore)||(60<=Math.ceil(stabilityScore)&&index<=4)},
                    {'color2': 60>=Math.ceil(stabilityScore)&&40<=Math.ceil(stabilityScore)&&index<=3},
                    {'color3': (40>=Math.ceil(stabilityScore)&&20<=Math.ceil(stabilityScore)&&index<=2)||
                      (20>=Math.ceil(stabilityScore)&&0<Math.ceil(stabilityScore)&&index==1)
                      }]">
                </span>
              </p>
              <i>{{stabilityScore}}</i>
            </li>
            <li>
              <em>科技创新指数：</em>
              <p class="score-star clearfix" :title="scienceScores+'分'">
                <span v-for="(index) in 5" :key="index"
                  :class="[{'color1': 80<=Math.ceil(scienceScores)||(60<=Math.ceil(scienceScores)&&index<=4)},
                    {'color2': 60>=Math.ceil(scienceScores)&&40<=Math.ceil(scienceScores)&&index<=3},
                    {'color3': (40>=Math.ceil(scienceScores)&&20<=Math.ceil(scienceScores)&&index<=2)||
                      (20>=Math.ceil(scienceScores)&&0<Math.ceil(scienceScores)&&index==1)
                      }]"></span>
              </p>
              <i>{{scienceScores}}</i>
            </li>
            <li>
              <em>投资风险指数：</em>
              <p class="score-star clearfix" :title="riskScore+'分'">
                <span v-for="(index) in 5" :key="index"
                  :class="[{'color3': 80<=Math.ceil(riskScore)||(60<=Math.ceil(riskScore)&&index<=4)},
                    {'color2': 60>=Math.ceil(riskScore)&&40<=Math.ceil(riskScore)&&index<=3},
                    {'color1': (40>=Math.ceil(riskScore)&&20<=Math.ceil(riskScore)&&index<=2)||
                      (20>=Math.ceil(riskScore)&&0<Math.ceil(riskScore)&&index==1)
                      }]"></span>
              </p>
              <i>{{riskScore}}</i>
            </li>
            <li>
              <em>市场情绪指数：</em>
              <p class="score-star clearfix" :title="opinionScore+'分'">
                <span v-for="(index) in 5" :key="index"
                  :class="[{'color1': 80<=Math.ceil(opinionScore)||(60<=Math.ceil(opinionScore)&&index<=4)},
                    {'color2': 60>=Math.ceil(opinionScore)&&40<=Math.ceil(opinionScore)&&index<=3},
                    {'color3': (40>=Math.ceil(opinionScore)&&20<=Math.ceil(opinionScore)&&index<=2)||
                      (20>=Math.ceil(opinionScore)&&0<Math.ceil(opinionScore)&&index==1)
                      }]"></span>
              </p>
              <i>{{opinionScore}}</i>
            </li>
          </ul>
        </div>
        <div class="info2">
          <ul class="label-list">
            <li v-for="(item, index) in portraitList" :key="index">{{item}}</li>
          </ul>
        </div>
        <!-- 收藏 -->
        <el-tooltip
          class="item"
          effect="dark"
          :content="!isCollect ? '收藏' : '取消收藏'"
          placement="top">
          <a
            class="collect-icon"
            :class="{ highlight: isCollect, 'el-icon-star-on': isCollect, 'el-icon-star-off': !isCollect }"
            @click="collect()"
          ></a>
        </el-tooltip>
      </div>
      <el-card class="content overview-info">
        <div class="nav">
          <div :class="{ active: active == 0 }">
            <h6>企业信息
              <i class="icon1 el-icon-caret-bottom"></i>
              <!-- <i class="icon2 el-icon-caret-top"></i> -->
              <span v-show="stabilityScore"></span></h6>
            <div class="menu-box">
              <el-menu
                class="nav-menu"
                :default-active="onRoutes"
                text-color="#86899e"
                active-text-color="#504da6"
                @select="handleSelect"
              >
                <el-menu-item
                  v-for="(item, index) in nav1"
                  :key="index"
                  :index="item.index"
                >
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
          <div :class="{ active: active == 1 }">
            <h6>科创技术<i class="icon1 el-icon-caret-bottom"></i><span v-show="scienceScores"></span></h6>
            <div class="menu-box">
              <el-menu
                class="nav-menu"
                :default-active="onRoutes"
                active-text-color="#504da6"
                @select="handleSelect"
              >
                <template v-for="item in nav2">
                  <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                      <template slot="title">
                        <span slot="title">{{ item.name }}</span>
                      </template>
                      <el-menu-item
                        v-for="subItem in item.subs"
                        :index="subItem.index"
                        :key="subItem.index"
                      >
                        {{ subItem.name }}
                      </el-menu-item>
                    </el-submenu>
                  </template>
                  <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                      <span slot="title">{{ item.name }}</span>
                    </el-menu-item>
                  </template>
                </template>
              </el-menu>
            </div>
          </div>
          <div :class="{ active: active == 2 }">
            <h6>风险分析<i class="icon1 el-icon-caret-bottom"></i><span v-show="riskScore"></span></h6>
            <div class="menu-box">
              <el-menu 
                class="nav-menu" 
                :default-active="onRoutes"
                @select="handleSelect">
                <el-menu-item
                  v-for="(item, index) in nav3"
                  :key="index"
                  :index="item.index"
                >
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
          <div
            :class="{ active: active == 3 }"
            @click="handleSelect('publicSentiment')"
          >
            <h6>企业舆情<span v-show="opinionScore"></span></h6>
          </div>
        </div>
        <div>
          <router-view></router-view>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import resize from "@/utils/resize";
import Colors from "@/utils/chartsColors";
// import IndustryTable from './IndustryTable'
export default {
  mixins: [resize],
  inject: ["reload"],
  components: {
    // IndustryTable
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //  这里的vm指的就是vue实例，可以用来当做this使用
      if (from.name) {
        vm.routerParameter = from.name;
      }
    });
  },
  data() {
    return {
      eid: this.$route.query.eid,
      companyName: this.$route.query.name,
      companyLogo: "src", // 图片logo
      companyId: "",
      compositeScore: "", // 综合指数
      scienceScores: "", // 科技创新指数
      stabilityScore: "", // 企业稳定指数
      opinionScore: "", // 市场情绪指数
      riskScore: "", // 投资风险指数
      scoreArr: [false, false, false, false], // 4个分数计算完后，才计算综合指数
      nav1: [],
      nav2: [],
      nav3: [],
      active: 0,
      isCollect: false,
      portraitList: [], // 企业标签
    };
  },
  computed: {
    companyActive: {
      get: function() {
        return this.$store.state.companyActive;
      },
      set: function(newValue) {
        this.$store.commit("SetCompanyActive", newValue);
      }
    },
    routerParameter: {
      get: function() {
        return this.$store.state.routerParameter;
      },
      set: function(newValue) {
        this.$store.commit("setRouterParameter", newValue);
      }
    },
    onRoutes() {
      return this.$route.name;
    },
    ...mapState(["levelCode", "levelName", "IRkeyword"])
  },
  methods: {
    listClick() {
      this.$router.push({
        name: 'EnergyEnterpriseList'
      })
      // if (this.routerParameter === 'SynergySearch') { // 如果是产学研检索过来的，则back返回
      //   window.history.back()
      // } else {
      //   this.$router.push(
      //     {
      //       name: this.routerParameter
      //     },
      //     onComplete => {},
      //     onAbort => {}
      //   )
      // }
    },
    handleSelect(val) {
      if (val != "publicSentiment") {
        let that = this;
        fn(this.nav1, 0);
        fn(this.nav2, 1);
        fn(this.nav3, 2);
        function fn(data, n) {
          for (let i = 0; i < data.length; i++) {
            // 判断第二层
            if (data[i].subs) {
              for (let j = 0; j < data[i].subs.length; j++) {
                if (data[i].subs[j].index == val) {
                  that.active = n;
                  break;
                }
              }
              //判断第一层
            } else if (data[i].index == val) {
              that.active = n;
              break;
            }
          }
        }
      } else {
        this.active = 3;
      }
      this.companyActive = this.active;
      this.$router.push(
        {
          name: val,
          query: this.$route.query
          // query: { eid: this.$route.query.eid, name: this.$route.query.name }
        },
        onComplete => {},
        onAbort => {}
      );
    },
    goDetail(name) {
      this.$Bus.$emit("progressBar", name);
    },
    init() {
      this.nav1 = [
        // {
        //   index: "informationOver",
        //   name: "信息概览"
        // },
        {
          index: "business",
          name: "工商信息"
        },
        {
          index: "stockRight",
          name: "股权信息"
        },
        {
          index: "investmentDistribution",
          name: "投资分布"
        }
      ];

      this.nav2 = [
        {
          index: "technologyOver",
          name: "技术总览"
        },
        {
          index: "technicalAnalysis",
          name: "技术分析"
        },
        {
          index: "2",
          name: "科创专利",
          subs: [
            {
              index: "partentList",
              name: "专利列表"
            },
            {
              index: "auth",
              name: "转让/授权/质押"
            }
          ]
        }
      ];

      this.nav3 = [
        {
          index: "riskInformation",
          name: "风险信息"
        },
        {
          index: "riskAnalysis",
          name: "风险分析"
        }
      ];

      let routerName = this.$route.name
      let nav = [this.nav1, this.nav2, this.nav3]
      outer: for (let i=0; i<nav.length;i++) {
        for (let j=0; j<nav[i].length; j++) {
          if (routerName === nav[i][j].index) {
            this.active = Number(i)
            break outer
          }
        }
      }

      let promise = new Promise((resolve, reject) => {
        // 获取companyId
        this.$get(this.$Url.company.getCompanyId, {
          keyword: this.companyName
        }).then(res => {
          let data = res.data;
          if (data) {
            this.companyId = data[0].eid;
            resolve("next");
          }
        });
      });
      promise.then(() => {
        this.getCompanyLogo();
        // 计算分值
        this.getScienceScore();
        this.getStabilityScore();
        this.getInvestmentRiskScore();
        this.getOpinionScore();
      });
      // 获取当前公司是否已收藏
      this.isCompanyCollect()
      // 获取公司标签
      this.getPortrait()
    },
    // 获取公司logo
    getCompanyLogo() {
      this.$get(this.$Url.search.companyLogo, {
        eid: this.companyId
      }).then(res => {
        let data = res.data;
        if (data) {
          this.companyLogo = data;
        } else {
          this.companyLogo = "none";
        }
      });
    },
    // 综合指数
    getCompositeScore() {
      this.$post(this.$Url.score.compositeScore, {
        name: this.companyName,
        sub_score: {
          科技创新指数: this.scienceScores,
          企业稳定指数: this.stabilityScore,
          市场情绪指数: this.opinionScore,
          投资风险指数: this.riskScore
        }
      })
        .then(data => {
          this.compositeScore = data.data || 0;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取科技创新指数
    getScienceScore() {
      this.$get(this.$Url.company.basicInfo, {
        companyName: this.companyName,
        dataType: "patentScore"
      })
        .then(data => {
          this.scienceScores = data.data.patentScore || 0;
          this.$set(this.scoreArr, 0, true);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取企业稳定指数
    getStabilityScore() {
      this.$post(this.$Url.score.stabilityScore, {
        eid: this.eid
      })
        .then(data => {
          if (data.data) {
            this.stabilityScore = Math.floor(data.data.score);
            this.$set(this.scoreArr, 1, true);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取口碑影响指数
    getOpinionScore() {
      this.$get(this.$Url.score.opinionScore, {
        companyName: this.companyName
      })
        .then(data => {
          this.opinionScore = Math.floor(data.data);
          this.$set(this.scoreArr, 2, true);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取投资风险指数
    getInvestmentRiskScore() {
      this.$post(this.$Url.score.riskScore, {
        eid: this.eid
      })
        .then(data => {
          if (data.data) {
            this.riskScore = Math.floor(data.data.score);
            this.$set(this.scoreArr, 3, true);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取当前公司是否已收藏
    isCompanyCollect() {
      this.$get(this.$Url.company.isCollect2, {
        eid: this.$route.query.eid || ''
      }).then(res => {
        let data = res.data
        this.isCollect = data
      }).catch(err => {})
    },
    // 收藏
    collect() {
      let eid = this.$route.query.eid
      if (this.isCollect) {
        // 取消收藏
        this.$get(this.$Url.company.cancelCollectComp, {
          eid
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "取消收藏成功"
            });
            this.isCollect = !this.isCollect
          } else {
            this.$message({
              type: "error",
              message: "取消收藏失败",
              duration: 1000
            });
          }
        }).catch(e => {console.log(e);});
      } else {
        this.$get(this.$Url.company.collectComp, {
          eid
        }).then(res => {
          if (res.status == 200) {
            this.$message({
              type: "success",
              message: "收藏成功",
              duration: 1000
            });
            this.isCollect = !this.isCollect
          } else {
            this.$message({
              type: "error",
              message: "收藏失败",
              duration: 1000
            });
          }
        }).catch(e => {console.log(e);});
      }
    },
    // 获取公司标签
    getPortrait() {
      this.$post(this.$Url.science.portrait, {
        eid: this.$route.query.eid || ''
      }).then(data => {
        if(data.data && data.data.length > 0){
          this.portraitList = data.data.slice(0,10) || []
        }
      }).catch(err => {
        console.log(err)
      })
    },
    back() {
      let enterpriseBack = localStorage.getItem('enterpriseBack')
      if (enterpriseBack && enterpriseBack.length > 0) {
        this.$router.push(JSON.parse(enterpriseBack))
      }
      // this.$router.push({
      //   name: 'IRSearchResult',
      //   query: {
      //     keyword: this.IRkeyword,
      //     type: 5
      //   }
      // })
      // this.$router.go(-1);
    }
  },
  watch: {
    scoreArr() {
      for (let i = 0; i < this.scoreArr.length; i++) {
        if (this.scoreArr[i] === false) {
          return;
        }
      }
      this.getCompositeScore();
    },
    "$route.query.name"() {
      this.reload();
    },
    companyActive() {
    }
  },
  created() {},
  beforeRouteLeave(to, from, next) {
    this.companyActive = 0;
    next();
  },
  mounted() {
    // this.active = this.companyActive;
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  .back {
    position: relative;
    width: 100%;
    padding: .2rem .1rem;
    text-align: left;
    span {
      font-size: .14rem;
      cursor: pointer;
    }
  }
  .vflex {
    position: relative;
    display: flex;
    .aside {
      position: relative;
      width: 3.2rem;
      padding: 0 .2rem;
      box-sizing: border-box;
      background-color: $color83;
      .logo {
        position: relative;
        width: 1.34rem;
        height: 1.34rem;
        border: 1px solid #d9e0ee;
        margin: .3rem auto .2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: $color2;
        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
      .info1 {
        position: relative;
        h2 {
          width: 100%;
          font-weight: bold;
          font-size: .2rem;
          text-align: center;
          color: $color2;
        }
        .score-list {
          position: relative;
          margin-top: .2rem;
          list-style: none;
          li {
            width: 100%;
            display: inline-flex;
            align-items: center;
            margin-bottom: .1rem;
            &.comprehensive {
              div {
                margin-left: .1rem;
              }
              i {
                font-size: .28rem;
                font-weight: bold;
                vertical-align: text-bottom;
              }
            }
            em {
              display: inline-block;
              vertical-align: middle;
              font-size: .16rem;
              color: $color2;
            }
            .score-star {
              display: inline-block;
              vertical-align: middle;
              margin-right: .1rem;
            }
            i {
              display: inline-block;
              vertical-align: middle;
              font-size: .14rem;
              font-style: normal;
              color: $color2;
            }
            .wenhao {
              display: inline-block;
              width: .22rem;
              height: .22rem;
              line-height: .22rem;
              border-radius: 50%;
              margin-left: .1rem;
              vertical-align: super;
              text-align: center;
              text-indent: -.02px;
              font-size: .16rem;
              font-weight: bold;
              color: $color2;
              background-color: #E5E7F2;
              cursor: pointer;
            }
          }
        }
      }
      .info2 {
        .label-list {
          position: relative;
          margin-top: .2rem;
          li {
            display: inline-block;
            line-height: .3rem;
            padding: 0 .18rem;
            margin-bottom: .1rem;
            margin-right: .1rem;
            border: 1px solid $mainColor;
            border-radius: .2rem;
            box-sizing: border-box;
            font-weight: normal;
            font-size: .13rem;
            color: $color2;
            cursor: default;
          }
        }
      }
      .all-score {
        height: .34rem;
        margin-top: .1rem;
        font-size: .14rem;
        color: #86899e;
        span {
          font-size: .2rem;
          color: #504da6;
        }
      }
      .collect-icon {
        position: absolute;
        top: .2rem;
        right: .2rem;
        display: block;
        width: .3rem;
        height: .3rem;
        line-height: .3rem;
        border-radius: 50%;
        margin-left: .2rem;
        text-align: center;
        font-size: .16rem;
        color: #fff;
        background: #909399;
        cursor: pointer;
        &.highlight {
          line-height: .29rem;
          font-size: .19rem;
          background: $mainColor;
        }
      }
    }
    .content {
      position: relative;
      width: calc(100% - 3.2rem);
      background-color: $color46;
      .nav {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: .5rem;
        margin-bottom: .1rem;
        text-align: center;
        font-size: .14rem;
        color: #4f515b;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
        background-color: #f3f6f9;
        h6 {
          font-size: .18rem;
          i {
            display: inline-block;
            margin-left: .05rem;
            font-size: .16rem;
          }
          .icon1 {
            display: inline-block;
            transition: all .2s ease;
          }
          // .icon2 {
          //   display: none;
          // }
        }
        & > div {
          position: relative;
          flex: 1;
          height: .5rem;
          line-height: .5rem;
          cursor: pointer;
          &:hover {
            .icon1 {
              // display: none;
              transform: rotate(180deg);
            }
            // .icon2 {
            //   display: inline-block;
            // }
            .menu-box {
              display: block;
            }
          }
          &.active {
            color: #fff;
            box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
            // background-color: rgba(80,77,165,0.9);
            background-color: $mainColor;
          }
          .menu-box {
            position: absolute;
            top: .5rem;
            z-index: 9;
            display: none;
            width: 100%;
            .nav-menu {
              position: relative;
              width: 100%;
              margin-top: .14rem;
              font-size: .16rem;
              font-weight: bold;
              &.active {
                display: block;
              }
              &:before {
                position: absolute;
                top: -.09rem;
                left: 50%;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent;
                border-width: 10px;
                border-top-width: 0;
                border-bottom-color: #fff;
                border-style: solid;
                margin-left: -.1rem;
                content: " ";
              }
              ::v-deep {
                .el-menu-item {
                  font-size: .16rem;
                  span {
                    font-size: .16rem;
                  }
                }
                .el-submenu__title {
                  font-size: .16rem;
                }
              }
            }
          }
        }
      }
    }
  }
}
.score-star {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  span {
    display: block;
    float: left;
    width: .18rem;
    height: .18rem;
    margin-left: .03rem;
    border-radius: 4px;
    background-color: #d1d6e3;
    &.color1,
    &.color2,
    &.color3 {
      &:nth-of-type(1) {
        background-color: #87ceeb;
      }
      &:nth-of-type(2) {
        background-color: #87cefa;
      }
      &:nth-of-type(3) {
        background-color: #6495ed;
      }
      &:nth-of-type(4) {
        background-color: #4169e1;
      }
      &:nth-of-type(5) {
        background-color: #4169e1;
      }
    }
  }
}
.score-star .color1 {
  // background-color: #4169E1;
  // background-color: #22dabe !important;
}
.score-star .color2 {
  // background-color: rgba(34,218,190,0.5) !important;
  // background-color: #fddf76 !important;
}
.score-star .color3 {
  // background-color: rgba(34,218,190,0.4) !important;
  // background-color: #fc3f4d !important;
}
</style>